---
title: "NodeEditor"
---

`NodeEditor` is a React component for rendering the node editor. It requires `portTypes` and `nodeTypes`, and can be rendered with or without existing nodes.

## Zooming & Panning

By default, the node editor can be zoomed in and out using the scroll wheel, and panned by dragging anywhere on the background. In this release these are the only methods of zooming and panning, but an upcoming release will likely add an optional UI for using these features.

## Importing

```js
import { NodeEditor } from "flume";
```

## Props

### `portTypes` : object

Required. `portTypes` are generated using the `FlumeConfig` class.

### `nodeTypes` : object

Required. `nodeTypes` are generated using the `FlumeConfig` class.

### `nodes` : object

Optional. An object of nodes previously generated through the node editor.

### `comments` : object

Optional. An object of comments previously generated through the node editor.

### `defaultNodes` : array<object\>

Optional. For many logic graphs, it's helpful to have the editor start with a set of default nodes. To define these nodes, pass an array of objects with the type of the node, and an x and y position relative to the center of the editor.

| Key  | Type         | Default | Required | Description                                                                                                                   |
| ---- | ------------ | ------- | -------- | ----------------------------------------------------------------------------------------------------------------------------- |
| type | string       | ""      | Required | The type key of the node you want to add as a default. This type must have been previously defined in the `nodeTypes` object. |
| x    | int \| float | 0       | Optional | The **horizontal** starting position of the node, relative to the center of the node editor.                                  |
| y    | int \| float | 0       | Optional | The **vertical** starting position of the node, relative to the center of the node editor.                                    |

### `onChange` : function

Optional. This function will be called any time any of the nodes in the node editor change. This includes their position, connections, and the values of their controls.

:::note
For performance reasons, this function will **not** be called while the user is dragging a node. As soon as the user releases a dragged node, this function will be called with the updated position.
:::

### `onCommentsChange` : function

Optional. This function will be called any time any of the comments in the node editor change. This includes their position, size, color, and text.

:::note
For performance reasons, this function will **not** be called while the user is dragging or resizing a comment. As soon as the user releases a dragged comment, this function will be called with the updated comment.
:::

### `context` : object

Optional. Context is used to pass data to the node editor if your nodes require live data. For example, you may have a node with a dropdown control for selecting a color, but the available colors depend on the state of your app. To allow this kind of calculation, the context object is provided to your node at runtime to aid in these kinds of calculations.

### `initialScale` : int | float

Optional. The initial level of zoom for the node editor. This must be a number between `0.1` and `7`. If a number is provided outside of this range it will be clamped to the nearest valid number. Defaults to `1`.

### `disableZoom` : boolean

Optional. Prevents the user from zooming in and out of the node editor. This can be helpful if your node editor is on a scrollable page, and you don't want to capture scroll events as the user's mouse passes the editor. Defaults to `false`.

### `disablePan` : boolean

Optional. Prevents the user from panning inside of the node editor. Defaults to `false`.

### `spaceToPan` : boolean

Optional. If `true`, the spacebar must be depressed in order to pan the node editor. The cursor will also be updated to show a draggable indicator when the spacbar is depressed.

### `hideComments` : boolean

Optional. If the current node editor contains comment blocks, they will not be rendered. This can be helpful for providing a UI for toggling comments on and off if desired. Defaults to `false`.

### `disableComments` : boolean

Optional. Prevents the user from adding additional comments. Defaults to `false`.

### `disableFocusCapture` : boolean

Optional. Prevents the node editor from capturing focus when mousing over the editor. This can help prevent focus bugs in complex applications. Defaults to `false`.

### `circularBehavior` : string

Optional. Can be one of 3 possible values:

- `prevent`: Default. When a user attempts to connect nodes in a way that would create a circular graph, the connection is rejected and a warning is displayed.
- `warn`: Creating circular connections is allowed, but a warning is displayed.
- `allow`: Creating circular connections is allowed without a warning.

### `renderNodeHeader` : function

Optional. Allows you to override the rendering of the node header. Common use-cases might include overriding the label of a node, or adding custom UI elements like a button to delete the node, or open the node context menu. This prop accepts a function which is expected to return jsx.

#### Function parameters

The `renderNodeHeader` function provides three parameters to help you render a custom header. Together they make up the following function signature:

```jsx
(Wrapper, nodeType, actions) => jsx;
```

#### Wrapper

Wrapper is a React component in which you can render your custom UI. Usage of the wrapper is not required, but is recommended for accessibility and consistency with the other components of the UI.

#### nodeType

nodeType represents the current type definition of the node being rendered. For documentation for the properties available on nodeType see [FlumeConfig](/docs/flume-config#addnodetype--methodnodetype).

#### actions

Actions is an object of functions which operate in the context of the current node. Currently the following actions are available:

- openMenu: Opens the context menu for the node.
- closeMenu: Closes the context menu for the node.
- deleteNode: Deletes the current node.
